<template>
    <div class="msg_container">
        <el-form 
            :model="passWordData" 
            :rules="passWordRuls" 
            label-width="120px"
            ref="passWordForm">
            <el-form-item label="当前密码 :" prop="password">
                <el-col :span="10">
                    <el-input type="password" show-password v-model="passWordData.password" placeholder="请输入当前密码"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="新密码 :" prop="newPassword">
                <el-col :span="10">
                    <el-input type="password" show-password v-model="passWordData.newPassword" placeholder="请输入新密码"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="确定密码 :" prop="confirmNewPassword">
                <el-col :span="10">
                    <el-input type="password" show-password v-model="passWordData.confirmNewPassword" placeholder="请输入新密码"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="">
                <el-col :span="10">
                    <button type="button" class="submit_btn" @click="submitFn">提交</button>
                </el-col>
            </el-form-item>
            
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { editPassword } from '../../../api/user'
import { ElMessage } from 'element-plus'
const passWordForm = ref(null)
const passWordData = reactive({
    password: '',
    newPassword: '',
    confirmNewPassword: '',
}) 
function resetPassWordData() {
    passWordData.password = ''
    passWordData.newPassword = ''
    passWordData.confirmNewPassword = ''
}

function submitFn() {
    passWordForm.value.validate((valid) => {
        if (valid) {
            const newData = {
                password:passWordData.password,
                newPassword: passWordData.newPassword
            }
            editPassword(newData).then(res => {
                console.log('修改密码：', res)
                if(res.status === 200) {

                    if (res.data.status) {
                        ElMessage({
                            message: '修改密码成功',
                            type: 'success',
                            icon: 'none',
                            duration: 3 * 1000
                        })
                    } else {
                        ElMessage({
                            message: res.data.msg,
                            type: 'error',
                            icon: 'none',
                            duration: 3 * 1000
                        })
                    }
                    resetPassWordData()
                } else {

                }
            })
        }
    })
}

const confirmPass = (rule, value, callback) => {
    if (!value) {
        callback('请输入新密码')
    } else if (passWordData.newPassword !== passWordData.confirmNewPassword) {
        callback('两次密码输入不一致')
    } else {
        callback()
    }
}

const passWordRuls = {
    password: [
        { required: true, message: '请输入当前密码', trigger: 'blur' },
        { min: 6, max: 20, message: '密码长度应为 6-20 个字符', trigger: 'blur' },
    ],
    newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' }
    ],
    confirmNewPassword: [
        { required: true, validator:confirmPass, trigger: 'blur' }
    ],
}
</script>

<style scoped>
.submit_btn {
    width: 200px;
    height: 40px;
    line-height: 42px;
    text-align: center;
    color: #FFF;
    background-color: #e13f79;
    font-size: 18px;
    border-radius: 5px;
  }

</style>